#tag-cloud {
  background-color: #fafafa;

  .wrapper {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 36px 60px 60px 60px;
    text-align: center;

    .tag {
      position: relative;
      margin: 12px 6px 0 6px;
      padding: 0 12px;
      height: 38px;
      line-height: 38px;
      border: none;
      border-radius: 8px;
      box-shadow: 0 13px 15px rgba(0, 0, 0, .1);
      color: #738192;
      background-color: #ffffff;
      transition: .25s;

      &:hover {
        transform: translateY(6px);
        box-shadow: 0 3px 3px rgba(0, 0, 0, .15);
      }
    }

    .no-tag {
      transform: translateY(6px);
      box-shadow: 0 3px 3px rgba(0, 0, 0, .15);
    }
  }
}

body.dark {
  #tag-cloud {
    background-color: @dark-text-color-10;

    .wrapper {
      .tag {
        box-shadow: 0 13px 15px @dark-text-color-9;
        background-color: @dark-bg-color;
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  #tag-cloud {
    .wrapper {
      padding: 18px 20px 30px 20px;
    }
  }
}
